import React, { useState,useEffect } from 'react'
import './Login.scss'
import { connect, useSelector,useDispatch } from 'react-redux'
import { changeHidden } from '@/store/login'
import { RootState} from '@/modules/RootState'
import { checkKey, getKey } from '@/utils/api'
import yes from '@/assets/fonts/login/yes.svg'
import { Message } from 'element-react';

interface LoginProps{
    className:string
}

function Login({className}:LoginProps) {
    console.log('登录界面加载');

    // useSelector() 用来加载 state 中的数据
    const state = useSelector((state:RootState) => state.login);

    const dispatch = useDispatch();

    const hiddenIt = () =>{
        dispatch(changeHidden(state.hidden));
    }

    let loginResult:any;
    let status:number = -1;
    let timer:any;

    const timerKey = () => {
        timer = setInterval(async () => {
            // console.log('timer');
            loginResult = await dispatch(checkKey(state.key) as any);
    
            console.log(loginResult)
            console.log(loginResult.payload)

            if(loginResult.payload == 800){
                status = loginResult.payload;
                clearInterval(timer);
            }else if(loginResult.payload == 803){
                status = loginResult.payload;
                dispatch(changeHidden(state.hidden));
                clearInterval(timer);
                Message({
                    message: '登录成功',
                    type: 'success'
                });
            }else{
                status = loginResult.payload;
            }

            console.log('status',status)
        }, 2000);
    }

    useEffect(() => {
        if(state.loginPic != 'false'){
            timerKey();
        }
        return () =>{
          clearInterval(timer);
        };
      },[state.loginPic,status,loginResult]);

    const refresh = () => {
        clearInterval(timer);
        status = -1;
        dispatch(getKey())
    }

    return (
    <div className={`${className} Login-container`}>
        <span className='loginClose' onClick={hiddenIt}>×</span>
        <div style={{display:status == 801 ? 'flex' : 'none'}}>
            <div className='Login-container2'>
                <h1>扫码登录</h1>
                <img className='erweima' src={state.loginPic} alt="" />
                <span className='useApp'>
                    使用<a>网易云音乐APP</a>扫码登录
                </span>
                <span className='otherLogin'>使用其他登录模式&gt;</span>
            </div>
            <div className='againLogin' style={{display: status !== 800 ? 'none' : 'flex'}}>
                <div className='lose'>二维码已失效</div>
                <button className='clickAgain' onClick={refresh}>点击刷新</button>
            </div>
        </div>
        <div className="Login-container3" style={{display: status == 802 ? 'none' : 'flex'}}>
            <img src={yes} alt="" />
            <div style={{display:status == 802 ? 'none' : ''}}>请在手机上按确认</div>
            <div style={{display:status !== 803 ? 'none' : ''}}>登录成功</div>
        </div>
    </div>
  )
}

export default React.memo(Login)